import React from "react";
import { Meta, StoryFn } from '@storybook/react'; // 使用新的导入方式
import { action } from "@storybook/addon-actions";
// import { withInfo } from "@storybook/addon-info";
import Button from "./button.tsx";

const styles: React.CSSProperties = {
    textAlign: "center"
}
// 返回含有设定样式的节点
const centerDecorator = (story: any) => <div style={styles}>{story()}</div>
// 默认导出
export default {
    title: 'Button', // 设置故事的标题
    component: Button, // 指定组件
    decorators: [centerDecorator],
    tags: ['autodocs'],
} as Meta;
// 定义模板
const defaultTemplate: StoryFn = (args) => <Button {...args} onClick={action('button-clicked')} />;
const sizeTemplate: StoryFn = (args) => (
    <>
        <Button {...args} size="lg" btnType="primary" onClick={action('button-lg')}>Large Button</Button>
        <Button {...args} size="sm" onClick={action('button-sm')}>Small Button</Button>
    </>
);
const typeTemplate: StoryFn = (args) => (
    <>
        <Button {...args} btnType="danger" onClick={action('button-danger')}>Danger Button</Button>
        <Button {...args} btnType="primary" onClick={action('button-primary')}>Primary Button</Button>
    </>
);
// 定义故事
export const WithText = defaultTemplate.bind({});
WithText.args = {
    children: 'Click me', // 配置不同的故事状态
};
export const WithSize = sizeTemplate.bind({});
WithSize.args = {
    children: 'Click me with size',
};
export const WithType = typeTemplate.bind({});
WithSize.args = {
    children: 'Click me with type',
};